<template>
  <view class="padding-bottom">
    <view class="healthBox">
      <view class="top">
        <view class="top-head"><img :src="headImg" /></view>
        <view class="top-userInfo">
          <span class="name">{{ name }}</span>
          <span v-if="sex" class="sex">{{ sex }}</span>
          <span v-if="age" class="age">{{ age }}岁</span>
        </view>
      </view>
      <!-- 指标记录详情 -->
      <view class="time">{{ createDate | dataFilter }}档案详情如下：</view>
      <!-- 确诊记录 -->
      <view class="rowBox">
        <view class="title">
          <view class="titleIcon">
            <img :src="qzjl" />
          </view>
          病史
        </view>
        <view class="stepLine">
          <view class="topClearLine"></view>
          <view v-if="patientChronicDiseases.length > 0" class="listBox">
            <view v-for="item in patientChronicDiseases" :key="item.id" class="list">
              <span class="radioIcon"></span
              ><span v-if="item.diseaseDate" class="time">{{ item.diseaseDate | dataFilterYear }}</span> 确诊{{
                item.diseaseName
              }}
            </view>
          </view>
          <view v-else class="noMessage">{{ noMessageTxt }}</view>
          <view class="bottomClearLine"></view>
        </view>
      </view>
      <!-- 过敏史 -->
      <view class="rowBox">
        <view class="title">
          <view class="titleIcon">
            <img :src="gmx" />
          </view>
          过敏史
        </view>
        <view v-if="allergy" class="content">{{ allergy }} </view>
        <view v-else class="noMessage">{{ noMessageTxt }}</view>
      </view>
      <!-- 家族史 -->
      <view class="rowBox stepNoLine">
        <view class="title">
          <view class="titleIcon">
            <img :src="jzs" />
          </view>
          家族史
        </view>
        <view class="stepLine noLine">
          <view v-if="patientFamilyDiseases.length > 0">
            <view v-for="item in patientFamilyDiseases" :key="item.id" class="list"
              ><span class="radioIcon"></span><span class="time">{{ item.relationTitle }}</span
              >{{ item.diseaseName }}
            </view>
          </view>
          <view v-else class="noMessage">{{ noMessageTxt }}</view>
        </view>
      </view>
      <!-- 用药信息 -->
      <view class="rowBox">
        <view class="title">
          <view class="titleIcon">
            <img :src="yyxx" />
          </view>
          用药信息
        </view>
        <view v-if="drugsObj.drugs && drugsObj.drugs.length > 0" class="content">
          <view v-for="item in drugsObj.drugs" :key="item.baseDrugId" class="hisList">
            <view class="name">{{ item.commonName }}（{{ item.productName }}）</view>
            <view class="way">{{ item.frequency | drugsFilter }}/每次{{ item.useAmount }}{{ item.minimumUnit }}</view>
          </view>
        </view>
        <view v-else class="noMessage">{{ noMessageTxt }}</view>
      </view>
    </view>

    <view class="targetDetails">
      <!-- 体征指标 -->
      <view class="rowBox">
        <view class="title">体征指标</view>

        <view class="bodyTarget">
          <template v-for="(item, index) in main.bodyTarget">
            <view v-if="item.value" :key="index" class="bodyList">
              <span class="grayColor">{{ item.name }}：</span
              ><span v-show="item.value">{{ item.value }}{{ item.unit }}</span>
            </view>
          </template>
          <view v-if="isArrObjectValueEmpty(main.bodyTarget)" class="noMessage"> 暂无</view>
        </view>
      </view>
      <!-- 一般检查指标 -->
      <view class="rowBox routineTarget">
        <view class="title">一般检查指标</view>
        <view class="body">
          <template v-for="(item, index) in main.ordinaryTarget">
            <view v-show="item.value" :key="index" class="list">
              <span class="left">{{ item.name }}</span>
              <span class="right">{{ item.value }}{{ item.unit }}</span>
              <view class="clear"></view>
            </view>
          </template>
          <view v-if="isArrObjectValueEmpty(main.ordinaryTarget)" class="noMessage"> 暂无</view>
        </view>
        <!-- <view class="textBox">
          <view v-for="(item, index) in main.ordinaryTargetTextarea" :key="index" class="textareas">
            <view class="textareas-title">{{ item.name }}</view>
            <view class="textareas-content">{{ item.value }}</view>
          </view>
        </view> -->
      </view>
      <!-- 大病症状指标 -->
      <view class="rowBox routineTarget illnessTarget">
        <view class="title">大病症状指标</view>
        <view class="body">
          <template v-for="(item, index) in main.illnessTarget">
            <view v-if="item.value" :key="index" class="list">
              <span class="left">{{ item.name }}</span>
              <span class="right">{{ item.value }}</span>
              <view class="clear"></view>
            </view>
          </template>
          <view v-if="isArrObjectValueEmpty(main.illnessTarget)" class="noMessage"> 暂无</view>
        </view>
      </view>
      <!-- 生活指标 -->
      <view class="rowBox routineTarget activeTarget">
        <view class="title">生活指标</view>
        <view class="body">
          <template v-for="(item, index) in main.activeTarget">
            <view v-if="item.value" :key="index" class="list">
              <span class="left">{{ item.name }}</span>
              <span class="right">{{ item.value }}</span>
              <view class="clear"></view>
              <view v-if="item.key === 'exerciseMode' && item.otherPlay" class="otherPlay">
                其他运动：{{ item.otherPlay }}
              </view>
            </view>
          </template>
          <view v-if="isArrObjectValueEmpty(main.activeTarget)" class="noMessage"> 暂无</view>
        </view>
      </view>
      <!-- 心理指标 -->
      <view class="rowBox routineTarget psychologyTarget">
        <view class="title">心理指标</view>
        <view class="body">
          <template v-for="(item, index) in main.psychologyTarget">
            <view v-if="item.value" :key="index" class="list">
              <span class="left">{{ item.name }}</span>
              <span class="right">{{ item.value }}</span>
              <view class="clear"></view>
            </view>
          </template>
          <view v-if="isArrObjectValueEmpty(main.psychologyTarget)" class="noMessage"> 暂无</view>
        </view>
      </view>
      <div class="rowBox rowBoxSource">
        <div class="t-b-row t-b-row2">
          <div class="t-b-source">
            <img :src="sourcePng" alt="" />
            <span>{{ sourceLabel }}</span>
          </div>
          <div class="t-c-time">
            <img :src="timePng" alt="" />
            <span>{{ createDate }}</span>
          </div>
        </div>
      </div>
    </view>

    <view class="btn-close" @click="reactPage">关 闭</view>
  </view>
</template>

<script>
import { getUserInfoByPatientId } from '@/api/join';
import { regularMedicationInfo } from '@/api/drugInfo';
import { getChronicDisease, getPhysicalExaminationId } from '@/api/healthy';
import { getAge } from '@/utils/optimize.js';
// import { getAssessmentReportsInfo } from '@/api/assessQuestion';\
// 标题旁边的小图标
import a from './../images/icons/a.png';
import b from './../images/icons/b.png';
import c from './../images/icons/c.png';
import d from './../images/icons/d.png';
import e from './../images/icons/e.png';
import sourcePng from '@/static/icon/source.png';
import timePng from '@/static/icon/time.png';

import { setDataVal } from './healthData';

const frequencyData = [
  { id: 1, name: '每日一次' },
  { id: 2, name: '每日两次' },
  { id: 3, name: '每日三次' },
  { id: 4, name: '每日四次' },
  { id: 5, name: '每夜一次' },
  { id: 6, name: '每周一次' }
];
export default {
  filters: {
    dataFilterYear: function (value) {
      if (!value) return '';
      value = value.slice(0, 4) + '年';
      return value;
    },
    dataFilter: function (value) {
      if (!value) return '';
      if (value.length > 11) {
        value = value.slice(0, value.length - 9);
      }
      value = value.replace(/(.+?)\-(.+?)\-(.+)/, '$1年$2月$3日');
      return value;
    },
    drugsFilter: function (value) {
      let data = frequencyData.filter((item) => item.id === value);
      return data && data.length > 0 ? data[0].name : undefined;
    }
  },
  data() {
    return {
      sourcePng: sourcePng,
      timePng: timePng,
      reportId: '',
      patientId: '',
      man:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png',
      woman:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png',
      son:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png',
      father:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png',
      der:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png',
      mother:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png',
      xbs: a,
      qzjl: b,
      gmx: c,
      jzs: d,
      yyxx: e,
      name: '',
      allergy: '',
      sex: '',
      age: '',
      optionRelation: '',
      diseases: [],
      illObj: {},
      drugsObj: {},
      repDetail: {}, // 报告详情
      noMessageTxt: '暂无',
      userInfo: null,
      headImg: '',
      main: {},
      patientFamilyDiseases: [], // 家族史
      patientChronicDiseases: [], // 现病史
      createDate: '', // 创建时间
      sourceLabel: '' // 数据来源
    };
  },

  onLoad: function (option) {
    if (option && option.patientId) {
      this.patientId = option.patientId;
      this.reportId = option.id;
      this.optionRelation = Number(option.relation) || '';
    } else {
      console.log('process.env.NODE_ENV:', process.env.NODE_ENV);
      if (process.env.NODE_ENV !== 'production') {
        this.patientId = '6ca645c38fe0478bb384995b0c6347e2';
        this.optionRelation = Number(2) || '';
        this.reportId = 22632;
      }
    }
    this.getUserInfo();
  },

  methods: {
    async getUserInfo() {
      // _info:用户信息和慢病 _drug:用药情况 _ill:确诊记录 _repDetail:报告详情
      const [{ data: _info }, { data: _drug }, { data: _ill }, { data: _repDetail }] = await Promise.all([
        getUserInfoByPatientId(this.patientId),
        regularMedicationInfo(this.patientId),
        getChronicDisease(this.patientId),
        getPhysicalExaminationId(this.reportId)
      ]);
      let { name, sex, diseases, allergy, birthday } = _info;
      this.name = name;
      this.allergy = allergy ? allergy : '';
      this.sex = sex === 1 ? '男' : sex === 0 ? '女' : '';
      this.age = birthday ? getAge(birthday) : '';
      this.diseases = diseases;
      this.illObj = _ill;
      this.drugsObj = _drug;
      this.main = setDataVal();
      this.createDate = _repDetail.createDate;
      this.sourceLabel = _repDetail.sourceLabel;
      this.main = setDataVal(_repDetail);
      this.patientFamilyDiseases = _repDetail.patientFamilyDiseases || [];
      this.patientChronicDiseases = _repDetail.patientChronicDiseases || [];
      this.headImg = this.headImgFilter();

      // 设置页面标题
      // uni.setNavigationBarTitle({
      //   title: this.formatData(this.createDate) + '档案'
      // });
    },
    isArrObjectValueEmpty(arrObj) {
      console.log('arrObj:', arrObj);
      if (arrObj) {
        let isEmpty = arrObj.every((item) => {
          return item.value === '';
        });
        return isEmpty;
      }
      return false;
    },
    formatData(value) {
      if (!value) return '';
      if (value.length > 11) {
        value = value.slice(0, value.length - 9);
      }
      value = value.replace(/(.+?)\-(.+?)\-(.+)/, '$1年$2月$3日');
      return value;
    },
    headImgFilter() {
      let src;
      if (this.sex === '男') {
        // 只有父母和子女需要区分性别
        if (this.optionRelation === 3) {
          src = this.father;
        } else if (this.optionRelation === 4) {
          src = this.son;
        } else {
          src = this.man;
        }
      } else if (this.sex === '女') {
        if (this.optionRelation === 3) {
          src = this.mother;
        } else if (this.optionRelation === 4) {
          src = this.der;
        } else {
          src = this.woman;
        }
      } else {
        if (this.optionRelation === 3) {
          src = this.mother;
        } else if (this.optionRelation === 4) {
          src = this.der;
        } else {
          src = this.man;
        }
      }
      // 如果是本人的话，则使用微信头像
      if (this.optionRelation === 1) {
        this.userInfo = JSON.parse(wx.getStorageSync('rawData'));
        src = this.userInfo.avatarUrl || this.man;
      }
      return src;
    },

    reactPage(id) {
      this.$wxPromise.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style lang="scss">
.healthBox {
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  .top {
    background: #f96a6a;
    height: 184rpx;
    padding: 24rpx;
    width: 702rpx;
    color: #fff;
    position: relative;
    &-head {
      position: absolute;
      left: 48rpx;
      bottom: 38rpx;
      background: rgba(254, 233, 233, 1);
      border-radius: 16rpx;
      display: inline-block;
      padding: 6rpx;
      width: 100rpx;
      height: 100rpx;
      border-radius: 100rpx;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        border-radius: 100rpx;
      }
    }
    &-userInfo {
      padding-left: 180rpx;
      margin-top: 88rpx;
      min-width: 460rpx;
      font-size: 32rpx;
      color: rgba(255, 255, 255, 0.9);
      .name {
        font-size: 40rpx;
      }
      span {
        display: inline-block;
        position: relative;
        padding: 0 26rpx;
      }
      .sex:after,
      .sex:before {
        position: absolute;
        content: '|';
        right: 0;
        top: -6rpx;
        font-size: 32rpx;
      }
      .sex:before {
        left: 0;
      }
      .age {
        white-space: nowrap;
      }
    }
  }
  .time {
    color: rgba(243, 78, 28, 1);
    font-size: 32rpx;
    margin: 24rpx;
  }
  .rowBox {
    margin: 24rpx;
    background-color: #fff;
    padding: 24rpx;
    border-radius: 16rpx;
    .title {
      position: relative;
      font-size: 38rpx;
      padding-left: 60rpx;
      .titleIcon {
        position: absolute;
        left: 0;
        top: 4rpx;
        width: 40rpx;
        height: 40rpx;
        img {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .content {
      color: rgba(0, 0, 0, 0.6);
      font-size: 32rpx;
      padding: 8rpx 0 0 60rpx;
      .hisList {
        margin: 14rpx 0;
        .way {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
}
.stepLine {
  margin-top: 20rpx;
  background-color: #fff1f1;
  border-radius: 8rpx;
  position: relative;
  padding: 20rpx 0;
  // padding-left: 40rpx;
  .list {
    padding: 16rpx;
    padding-left: 60rpx;
    position: relative;
    font-size: 32rpx;
    .radioIcon {
      position: absolute;
      left: 22rpx;
      top: 30rpx;
      content: '';
      display: inline-block;
      width: 14rpx;
      height: 14rpx;
      border-radius: 14rpx;
      background-color: #fff;
      z-index: 2;
      border: 2rpx solid #f34e1c;
    }
    .time {
      color: rgba(0, 0, 0, 0.6);
      padding-right: 10rpx;
    }
    .lookDetail {
      color: rgba(38, 128, 235, 1);
    }
  }
  .list:last-child {
    .radioIcon {
      background: #f34e1c;
    }
  }
  .last {
    .radioIcon {
      background: #f34e1c;
    }
  }
  .topClearLine {
    position: absolute;
    top: 0rpx;
    left: 0;
    width: 50rpx;
    height: 50rpx;
    background: #fff1f1;
    z-index: 1;
  }
  .bottomClearLine {
    position: absolute;
    bottom: 0rpx;
    left: 0;
    width: 50rpx;
    height: 60rpx;
    background: #fff1f1;
    z-index: 1;
  }
}
.stepLine:before {
  content: '';
  position: absolute;
  left: 28rpx;
  top: 0;
  width: 2rpx;
  height: 100%;
  border-right: 2rpx solid #f34e1c;
}
.stepNoLine {
  .stepLine:before {
    content: '';
    position: absolute;
    left: 18rpx;
    top: 20%;
    width: 2rpx;
    height: 60%;
    border-right: none;
  }
  .list:last-child {
    .radioIcon {
      background: none;
    }
  }
}
.lookAll {
  color: rgba(243, 78, 28, 1);
  text-align: center;
  margin-top: 24rpx;
  .btn {
    display: inline-block;
    padding: 10rpx 40rpx;
    padding-right: 60rpx;
    border: 2rpx solid rgba(243, 78, 28, 1);
    border-radius: 44rpx;
    position: relative;
  }
  .btn:after {
    content: '';
    position: absolute;
    right: 30rpx;
    top: 26rpx;
    width: 12rpx;
    height: 12rpx;
    border-top: 4rpx solid rgba(243, 78, 28, 1);
    border-right: 4rpx solid rgba(243, 78, 28, 1);
    transform: rotate(45deg);
  }
}
.noMessage {
  padding-left: 60rpx;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 20rpx;
}
@function title-icon($src) {
  @return url('../images/icons/' + $src + '.png');
}
@function title-bg-color($color) {
  @return $color;
}
$gray: rgba(0, 0, 0, 0.6);
%title-style {
  background-repeat: no-repeat;
  background-origin: border-box;
  background-size: 48rpx 48rpx;
  background-position: 24rpx center;
  padding: 20rpx;
  padding-left: 80rpx;
  font-size: 40rpx;
}
.targetDetails {
  .rowBox {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    margin: 24rpx;
    padding-bottom: 20rpx;
    .title {
      @extend %title-style;
      background-color: title-bg-color(rgba(220, 243, 255, 1));
      background-image: title-icon(d1);
    }
    // 体征指标
    .bodyTarget {
      padding: 24rpx;
      .bodyList {
        display: inline-block;
        width: 50%;
        padding: 20rpx 0;
        font-size: 28rpx;
      }
    }
  }
  // 一般检查指标
  .routineTarget {
    .title {
      background-color: title-bg-color(rgba(233, 241, 254, 1));
      background-image: title-icon(d2);
    }
    .body {
      margin: 0 24rpx;
      .list {
        font-size: 28rpx;
        border-bottom: 2rpx solid rgba(210, 210, 210, 1);
        padding: 24rpx 0;
        .left {
          float: left;
          color: $gray;
        }
        .right {
          float: right;
        }
      }
      .list:last-child {
        border: none;
      }
    }
    .textBox {
      background: rgba(244, 244, 244, 1);
      margin: 24rpx;
      border-radius: 10rpx;
      .textareas {
        font-size: 28rpx;
        padding: 24rpx;
        border-bottom: 2rpx solid rgba(210, 210, 210, 1);
        &-title {
          color: $gray;
          padding: 6rpx 40rpx;
          position: relative;
        }
        &-title:before {
          content: '';
          display: inline-block;
          border: 2rpx solid rgba(102, 102, 102, 1);
          width: 18rpx;
          height: 18rpx;
          border-radius: 18rpx;
          position: absolute;
          left: 0;
          top: 22rpx;
        }
        &-content {
          padding: 0 10rpx 0 40rpx;
        }
      }
      .textareas:last-child {
        border: none;
      }
    }
  }
}
.illnessTarget {
  .title {
    background-color: title-bg-color(rgba(254, 233, 233, 1)) !important;
    background-image: title-icon(d3) !important;
  }
}
.activeTarget {
  .title {
    background-color: title-bg-color(rgba(216, 246, 214, 1)) !important;
    background-image: title-icon(d4) !important;
  }
}
.psychologyTarget {
  .title {
    background-color: title-bg-color(rgba(248, 246, 218, 1)) !important;
    background-image: title-icon(d5) !important;
  }
}
.grayColor {
  color: $gray;
}
.otherPlay {
  text-align: right;
  color: $gray;
}
.clear {
  clear: both;
  overflow: hidden;
  height: 0;
  visibility: hidden;
}

.btn-close {
  height: 88rpx;
  line-height: 88rpx;
  border: 2rpx solid rgba(0, 0, 0, 0);
  background: -webkit-linear-gradient(214deg, #fe894d 0%, #ef3931 100%);
  background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
  opacity: 1;
  border-radius: 44rpx;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  margin: 0 32rpx;
  margin-bottom: 28rpx;
}
.padding-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.rowBox {
  &.rowBoxSource {
    padding-top: 20rpx;
  }
  .t-b-row {
    display: flex;
    align-items: center;
    height: 60rpx;
    margin: 0px 24rpx;
    &.t-b-row1 {
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
    .t-b-date {
      font-size: 36rpx;
      line-height: 64rpx;
      color: rgba(0, 0, 0, 0.9);
    }
    .t-b-btn {
      width: 160rpx;
      height: 48rpx;
      background: #ffffff;
      border: 2rpx solid #f34e1c;
      opacity: 1;
      border-radius: 24rpx;
      color: #f34e1c;
      line-height: 48rpx;
      text-align: center;
      padding: 0px 12rpx;
    }
    .t-b-source,
    .t-c-time {
      color: #999;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      img {
        width: 24rpx;
        height: 24rpx;
        margin-right: 12rpx;
      }
    }
    .t-c-time {
      margin-left: 56rpx;
    }
  }
}
</style>
